<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分词搜索</title>
</head>
<body>

<input type="text" id="keyword" placeholder="请输入关键字...">
<input type="checkbox" id="matchQuery">分词匹配
<button type="button" id="search">搜索</button>

<input type="file" id="file" placeholder="请选择文件...">
<button type="button" id="upload">上传</button>
<span id="uploadMsg" style="color: red;"></span>

<hr/>

<table id="table" width="100%" cellpadding="10px" cellspacing="0px" border="1px">

    <tr>
        <th>序号</th>
        <th>原文件名</th>
        <th>保存文件名</th>
        <th>文件类型</th>
        <th>匹配度</th>
        <th>匹配结果</th>
    </tr>

</table>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="UTF-8">
    $(function () {
        // 点击查询
        $('#search').click(function () {
            $.ajax({
               type: 'post',
               url: '/file/searchContent',
               data: {
                   keyword: $('#keyword').val(),
                   matchQuery: $('#matchQuery').is(':checked')
               },
               success: function (result) {
                   renderTable(result.data);
               },
               error: function () {
                   console.log('请求错误');
               }
            });
        });

        // 及时查询
        $('#keyword').bind('input propertychange', function () {
            $.ajax({
                type: 'post',
                url: '/file/searchContent',
                data: {
                    keyword: $('#keyword').val(),
                    matchQuery: $('#matchQuery').is(':checked')
                },
                success: function (result) {
                    renderTable(result.data);
                },
                error: function () {
                    console.log('请求错误');
                }
            });
        });

        // 上传文件
        $('#upload').click(function () {
            let formData = new FormData();
            formData.append("file", $("#file")[0].files[0]);
            $.ajax({
                type: 'post',
                url: '/file/upload',
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    console.log(result);
                    $('#uploadMsg').text(result.msg);
                    $('#file').val("");
                },
                error: function () {
                    console.log('请求错误');
                    $('#uploadMsg').text('请求错误');
                }
            });
        });

    })

    // 渲染表格数据函数
    let renderTable = function (data) {
        $('.tds').remove();
        $(data).each(function (index, item) {
            $('#table').append(`<tr class="tds">
                                                <td>${index + 1}</td>
                                                <td>${item.filename}</td>
                                                <td>${item.saveName}</td>
                                                <td>${item.type}</td>
                                                <td>${item.score * 100}</td>
                                                <td>${item.contentResult}</td>
                                            </tr>`);
        });
    }
</script>
</body>
</html>